<template>
	<view>
		<map id="map" :polyline="polyline" ref="map" style="width:750rpx;height:100vh;" :latitude="latitude"
			:longitude="longitude" :markers="covers" @regionchange="regionchange">
			<view class="img-map1 ">
				<image style="width: 60rpx;height: 60rpx;"
					src="https://5b0988e595225.cdn.sohucs.com/images/20190707/bac7909ac304469398f1ca62b0908814.gif">
					<view v-if="address" @click="goPaht" class="flex_3 address bjys_b font_size_28 border_r_20 padd_20">
						<view class="ellipsis">
							{{address}}
						</view>
						<up-icon style="float: left;" class="padd_bottom_20" name="arrow-right" size="16"></up-icon>
					</view>
					<view v-else class="address bjys_b font_size_28 border_r_20 padd_20"><up-loadmore
							:status="status" />
					</view>
				</image>
			</view>
			<image class="img-map2" src="https://img.zcool.cn/community/01ddeb5d52ba6da8012187f40f80e1.gif"
				@click="clickcontrol"></image>
		</map>
	</view>
</template>

<script setup lang="ts">
	import { toAddress } from '@/utils/map_sdk.js'
	import { onMounted, ref } from 'vue'
	import tool from '@/config/tool.js'
	const latitude = ref(null)//地图中心的经度or纬度
	const longitude = ref(null)//地图中心的经度or纬度
	const status = ref('loadmore');//加载loding
	const polyline = ref([{
		points: [{
			longitude: 116.52125,
			latitude: 39.794587,
		}, {
			longitude: 116.02125,
			latitude: 39.594581,
		}, {
			longitude: 116.72125,
			latitude: 39.294585,
		}],
		color: "#ff0f0f",
		width: 10,
		arrowLine: true,
		colorList: ['#ff0f0f', '#ffb3a7'],
	}]
	)//路线数据
	const covers = ref([
		//covers[0]是我当前的位置，往后是背包位置。现在经纬度是初始的，onLoad之后，会把当前定位的经纬度赋给covers[0]即显示我的位置(橙色定位图标)
		{
			id: 0,
			latitude: 34.74725,
			longitude: 113.62493,
			iconPath: '/static/logo.png',
			width: 20,
			height: 20
		}, {
			id: 1,
			latitude: 34.8133,
			longitude: 113.509267,
			iconPath: '/static/logo.png',
			width: 20,
			height: 20
		}, {
			id: 2,
			latitude: 34.8151,
			longitude: 113.509265,
			iconPath: '/static/logo.png',
			width: 20,
			height: 20
		}, {
			id: 3,
			latitude: 34.8123,
			longitude: 113.509269,
			iconPath: '/static/logo.png',
			width: 20,
			height: 20
		},
	],
	)//点位数据
	const address = ref('')//详细地址

	// 获取当前选择的地址
	const regionchange = (e : Object) => {
		if (e.type == 'end') {
			toAddress(e.detail.centerLocation.latitude, e.detail.centerLocation.longitude).then(res => {
				if (res.code == 1) {
					address.value = res.data.address
				} else {

				}
			})
		}
	}

	const clickcontrol = () => {
		uni.createMapContext("map", this).moveToLocation({   //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
			latitude: latitude.value,
			longitude: longitude.value
		});
	}
	onMounted(() => {
		init()
	})
	// 获取经纬度
	const init = () => {
		status.value = 'loading';
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				latitude.value = res.latitude
				longitude.value = res.longitude
				toAddress(res.latitude, res.longitude).then(res => {
					if (res.code == 1) {
						address.value = res.data.address
						console.log(address.value, 'lllll')
					} else {

					}
				})
			}
		});
	}
	const goPaht = () => {
		tool.paht('/pagesA/sean/sean')
	}
</script>

<style lang="scss" scoped>
	// 设置图片样式
	.img-map1 {
		position: fixed;
		bottom: 47%;
		left: 50%;
		transform: translate(-50%);
		width: 300rpx;
		text-align: center;

		.address {
			position: absolute;
			top: -120rpx;
			left: 0;
		}


	}

	.img-map2 {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		bottom: 12vh;
		right: 2vh;
		background-color: #FFFFFF;
		border-radius: 5px;
	}
</style>